<template>
    <div class="item-string">
        <div class="row">
            <div class="label">{{ item.message }}</div>
            <el-input
                v-model="value"
                :disabled="item.disabled"
                @blur="onBlur"
            ></el-input>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        item: {
            type: Object
        },
        dataKey: {
            type: String
        }
    },
    data() {
        return {
            value: this.item.value
        };
    },
    methods: {
        onBlur(e) {
            const newValue = e.target.value;
            this.$emit("update", {
                key: this.dataKey,
                newValue: newValue
            });
        }
    }
};
</script>

<style scoped lang="less">
.item-string {
    font-size: 16px;
    padding: 15px 0;
    color: #4e4e4e;

    .row {
        display: flex;
        align-items: center;

        .label {
            flex: 0 0 auto;
            width: 130px;
            margin-right: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}
</style>
